<script setup lang="ts">
  import { useGetReturnFactoryDetailGoodList } from '@/services/pages/return-factory/useReturnFactory'
  import { PropType, ref } from 'vue'
  import LogisticsFillInModal from './LogisticsFillInModal.vue'
  import { HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'
  import SignForReceipt from './SignForReceipt.vue'

  const {
    total,
    loading: getReturnFactoryDetailGoodListLoading,
    goodList,
    getGoodListParam,
    getGoodList,
  } = useGetReturnFactoryDetailGoodList()

  defineOptions({
    name: 'LogisticsListReturnFactoryDetail',
  })

  const props = defineProps({
    returnFactoryId: {
      type: String,
      required: true,
    },
    moduleCheckMethod: {
      type: Number as PropType<1 | 2>,
      default: () => 2,
    },
    status: {
      type: Number as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8>,
      default: () => 1,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 物流填写弹窗显示状态
  const logisticsFillInModalVisible = ref(false)

  // 签收产品弹窗显示状态
  const signForReceiptModalVisible = ref(false)

  // 物流选择列表
  const selectedLogisticsList = ref<Array<ReturnFactoryDetailGood>>([])

  /**
   * 页码更新事件
   * @param {Number} page - 页码
   */
  const handleCurrentChange = (page: number) => {
    getGoodListParam.value.page = page
    getGoodList(props.returnFactoryId)
  }

  /**
   * 物流选择事件
   * @param {Array<ReturnFactoryDetailGood>} logisticsList - 物流列表
   */
  const handleSelectionChange = (logisticsList: Array<ReturnFactoryDetailGood>) => {
    selectedLogisticsList.value = logisticsList
  }

  /**
   * 填写物流点击事件
   */
  const onFillLogistics = () => {
    if (props.moduleCheckMethod === 2 && selectedLogisticsList.value.length === 0) {
      HMessageBox.error(infoTip.returnFactory.detail.fill_logistics_no_select)
      return
    }

    logisticsFillInModalVisible.value = true
  }

  /**
   * 物流更新事件
   */
  const onUpdate = () => {
    emits('update')
    getGoodList(props.returnFactoryId)
  }

  /**
   * 签收产品事件
   */
  const onSignForReceipt = () => {
    if (props.moduleCheckMethod === 1) {
      selectedLogisticsList.value = goodList.value
    }

    if (props.moduleCheckMethod === 2 && selectedLogisticsList.value.length === 0) {
      HMessageBox.error(infoTip.returnFactory.detail.fill_logistics_no_select)
      return
    }

    signForReceiptModalVisible.value = true
  }

  defineExpose({
    getList: () => {
      getGoodList(props.returnFactoryId)
    },
  })
</script>

<template>
  <div
    v-loading="getReturnFactoryDetailGoodListLoading"
    class="return-factory-detail-table-wrapper"
  >
    <div class="title-wrapper">
      <div class="text">物流信息</div>
      <h-plain-button
        v-if="props.status === 2"
        :height="20"
        :padding-lr="6"
        @click="onFillLogistics"
      >
        填写物流
      </h-plain-button>
      <h-plain-button
        v-if="props.status === 3"
        :height="20"
        :padding-lr="6"
        @click="onSignForReceipt"
      >
        签收产品
      </h-plain-button>
    </div>
    <div class="return-factory-detail-table">
      <el-table
        :border="true"
        :data="[2, 3].includes(props.status) ? goodList : []"
        stripe
        @selection-change="handleSelectionChange"
      >
        <!-- 选择 -->
        <el-table-column
          v-if="props.moduleCheckMethod === 2"
          width="50"
          fixed="left"
          type="selection"
          :align="'center'"
        />

        <!-- 序号 -->
        <el-table-column width="50" fixed="left" label="序号" type="index" :align="'center'" />

        <!-- 条码 -->
        <el-table-column width="160" label="条码" prop="code" show-overflow-tooltip />

        <!-- 产品信息 -->
        <el-table-column width="400" label="产品信息" prop="goodsModel" show-overflow-tooltip>
          <template #default="{ row }">
            {{ `${row.goodsName}、${row.goodsModel}、${row.goodsSpec}、${row.goodsCode}` }}
          </template>
        </el-table-column>

        <!-- 寄回物流名称 -->
        <el-table-column
          label="寄回物流名称"
          prop="sendBackLogisticsName"
          width="140"
          show-overflow-tooltip
        />

        <!-- 寄回物流单号 -->
        <el-table-column
          label="寄回物流单号"
          prop="sendBackLogisticsNo"
          width="160"
          show-overflow-tooltip
        />

        <!-- 寄出物流名称 -->
        <el-table-column
          label="寄出物流名称"
          prop="sendOutLogisticsName"
          width="140"
          show-overflow-tooltip
        />

        <!-- 寄出物流单号 -->
        <el-table-column label="寄出物流单号" prop="sendOutLogisticsNo" width="160" />
      </el-table>
      <div class="pagination">
        <el-pagination
          size="small"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="4"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <logistics-fill-in-modal
      v-model:visible="logisticsFillInModalVisible"
      :return-factory-id="props.returnFactoryId"
      :check-method="props.moduleCheckMethod"
      :selected-logistics-list="selectedLogisticsList"
      @update="onUpdate"
    />

    <sign-for-receipt
      v-model:visible="signForReceiptModalVisible"
      :good-list="selectedLogisticsList"
      :return-factory-id="props.returnFactoryId"
      @update="onUpdate"
    />
  </div>
</template>

<style scoped lang="scss">
  .return-factory-detail-table-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 6px;

    .title-wrapper {
      display: flex;
      align-items: center;
      column-gap: 5px;

      .text {
        padding-left: 6px;
        font-size: 12px;
        border-left: 3px solid $primaryColor;
        font-weight: bold;
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }

  .image-list {
    display: flex;
    column-gap: 5px;
  }

  .pagination {
    margin-top: 6px;

    :deep(.el-pagination) {
      button {
        height: 24px !important;
      }

      .el-pager {
        li {
          height: 24px !important;
        }
      }
    }
  }
</style>
